<script setup lang="ts">
import Card from "../Card/index.vue";
import { cloneDeep } from "lodash-es";
import blank from "@/static/images/blank.png";

type configType = {
	label: string;
	key: string;
	type: "row" | "inputNumber";
};

const props = defineProps<{
	title: string;
	value;
	config: configType[];
	cusUiConfig?;
}>();
const emits = defineEmits(["update:value"]);

const uiConfig = computed(() => {
	return (
		props.cusUiConfig ?? {
			labelSpan: 7,
			valueSpan: 17,
		}
	);
});

const handleChangeNumber = (value: number, index: number, key: string) => {
	if (value < 0) {
		return;
	}
	const oldVal = cloneDeep(props.value);
	const _current = oldVal[index];
	_current[key] = value;

	emits("update:value", oldVal);
};

const selectAllNumber = (value: number, index: number, key: string) => {
	if (!value || value === 0) {
		return;
	}
	handleChangeNumber(value, index, key);
};
</script>

<template>
	<Card class="storage-card-container">
		<view class="title mb-30">{{ props.title }}</view>

		<template v-if="props.value.length > 0">
			<view
				class="storage-list-item"
				v-for="(item, index) in props.value"
				:key="item.mainOrderNumber"
			>
				<wd-row class="row" v-for="e in props.config" :key="e.key">
					<template v-if="!e.type || e.type === 'row'">
						<wd-col :span="uiConfig.labelSpan">{{ e.label }}</wd-col>
						<wd-col class="ellipsis-1" :span="uiConfig.valueSpan">{{
							item[e.key]
						}}</wd-col>
					</template>
					<template v-else-if="e.type === 'inputNumber'">
						<wd-col :span="uiConfig.labelSpan">{{ e.label }}</wd-col>
						<wd-input-number
							:modelValue="item[e.key]"
							@update:modelValue="(v) => handleChangeNumber(v, index, e.key)"
							:min="0"
							:max="item[`all${e.key}`]"
						/>
						<wd-button
							class="all-btn"
							type="primary"
							size="small"
							:round="false"
							@click="() => selectAllNumber(item[`all${e.key}`], index, e.key)"
							>选择全部</wd-button
						>
					</template>
				</wd-row>
			</view>
		</template>
		<template v-else>
			<view class="blank">
				<wd-img :src="blank" class="blank-img" />
				<view class="text">暂无数据</view>
			</view>
		</template>
	</Card>
</template>

<style lang="less" scoped>
@import url("./style/card.less");
@import url("./style/row.less");
@import url("./style/form.less");

.mb-30 {
	margin-bottom: 0px !important;
}

.storage-list-item {
	padding-top: 50px;

	&:not(:last-child) {
		border-bottom: 1px solid rgba(0, 0, 0, 0.35);
	}
}

.blank {
	width: 80%;
	height: 500px;
	margin: 10px auto;
	padding-bottom: 50px;

	.blank-img {
		width: 100%;
		height: 100%;
	}

	.text {
		text-align: center;
		font-size: 35px;
		color: rgba(0, 0, 0, 0.45);
	}
}
</style>
